{% from 'cart.html' import cart %}
{% import 'user_additions.html' as user_additions %}

<!doctype html>

{# Prevent skip-link target cutoff - for use with banner or without #}
{% if frontend_conf.classification_level|length and frontend_conf.classification_message|length %}
<html lang="en" style="scroll-padding-top: 2em;">
{% else %}
<html lang="en" style="scroll-padding-top: 0.5em;">
{% endif %}

<head>
    {{ user_additions.head_top() }}

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% if frontend_conf.base_url_href != "" %}
    <base href="{{ frontend_conf.base_url_href }}" />
    {% endif %}

    <link rel="shortcut icon" href="/static/favicon.ico">
    <title>Decider: {% block title %}{% endblock %}</title>

    {% if frontend_conf.use_cdn_resources %}
    {{ user_additions.cdn_css() }}
    {% elif frontend_conf.use_minified_srcs %}
        <link rel="stylesheet" href="/static/css/lib/bootstrap-5.3.0/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/lib/bootstrap-icons-1.10.5/bootstrap-icons.min.css">
        <link rel="stylesheet" href="/static/css/decider.css?cache_bust=24feb07">
    {% else %}
        <link rel="stylesheet" href="/static/css/lib/bootstrap-5.3.0/bootstrap.css">
        <link rel="stylesheet" href="/static/css/lib/bootstrap-icons-1.10.5/bootstrap-icons.css">
        <link rel="stylesheet" href="/static/css/decider.css?cache_bust=24feb07">
    {% endif %}

    {{ user_additions.head_bottom() }}
</head>

{# Add banner if set #}
{% if frontend_conf.classification_level|length and frontend_conf.classification_message|length %}
<body class="classification-banner" data-classification="{{ frontend_conf.classification_level }}" data-banner-content="{{ frontend_conf.classification_message }}">
{% else %}
<body>
{% endif %}
    {{ user_additions.body_top() }}

    {# Misconfig - JavaScript Required #}
    <noscript>
        <div class="alert alert-danger" role="alert" style="display: inline-block;">
            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
            <strong>Warning:</strong> Decider requires JavaScript to be enabled in order to function.
        </div>
    </noscript>

    {# Misconfig - Only Kiosk-Mode is Implemented #}
    {% if not g.kiosk_mode %}
    <div class="alert alert-danger" role="alert" style="display: inline-block;">
        <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
        <strong>Warning:</strong> Only Kiosk-mode is implemented for this instance of Decider.<br>
        Please restart Decider with <code>--config KioskConfig</code>.
    </div>
    {% endif %}

    {# Skip Link #}
    <button
        x-data
        id="skip-to-main-content"
        class="visually-hidden-focusable btn btn-sm btn-link"
        @click="document.getElementById('{% if self.main_id_block() %}{% block main_id_block %}{% endblock %}{% else %}main{% endif %}').focus()"
    >Skip to main content</button>

    {{ user_additions.after_skip_link() }}

    {# Navbar #}
    <nav id="navbar" class="navbar navbar-expand-lg" data-bs-theme="dark">
        <div class="container-fluid">

            {# CISA Logo + Decider Home #}
            <span class="navbar-brand">
                <a id="navCisaLogo"
                    href="https://www.cisa.gov/"
                    target="_blank"
                    rel="noreferrer noopener"
                    title="CISA.gov Website"
                    aria-label="CISA.gov Website"
                    class="text-decoration-none d-inline-block"
                >
                    <img src="/static/cisa-logo.svg" alt="CISA Logo" height="44" width="44" class="d-inline-block">
                </a>
                <a id="navDeciderHome"
                    class="underline-hover icon-link"
                    title="Decider Tree Home"
                    aria-label="Decider Tree Home"
                    href="{{ url_for('question_.question_start_page', version=g.version_picker.cur_version) }}"
                >
                    Decider <i class="bi bi-house-fill" aria-hidden="true"></i>
                </a>
            </span>

            {# Collapse Button #}
            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

            {# Collapsible Items #}
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mb-2 mb-lg-0 me-2">

                    {# Version Picker #}
                    <li class="nav-item dropdown" id="versionPicker">
                        <a
                            aria-label="Version Picker - currently on ATT&amp;CK Enterprise {{ g.version_picker.cur_version }}"
                            class="nav-link dropdown-toggle underline-hover"
                            href="#"
                            role="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                        >
                            ATT&amp;CK Enterprise {{ g.version_picker.cur_version }}
                        </a>
                        <ul class="dropdown-menu">
                            {% for version in g.version_picker.all_versions %}
                                {% if version != g.version_picker.cur_version %}
                                    <li>
                                        <a class="dropdown-item underline-hover" href="{{ url_for('question_.question_start_page', version=version ) }}">
                                            <em>(change to)</em> ATT&amp;CK Enterprise {{ version }}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </li>

                </ul>

                {# Mini Technique Search #}
                <div
                    class="mb-2 mb-lg-0 flex-grow-1 ms-auto"
                    x-data="navMiniSearch"
                    id="navMiniSearch"
                    data-bs-theme="light"
                    @keydown.escape="onEscape"
                >

                    {# Input Bar #}
                    <input
                        aria-label="Mini Technique Search"
                        type="search"
                        id="navMiniSearchInput"
                        autocomplete="off"
                        placeholder="Search Tech Names / IDs"
                        x-model.debounce="search"
                        @focus="onFocus"
                        @blur="onBlur"
                        @input="onInput"
                        @keydown.down.prevent="onDownInput"
                        @keydown.enter="onEnterInput"
                        class="w-100 form-control"
                    >

                    {# Dropdown #}
                    <div
                        x-cloak x-show="focused"
                        id="navMiniSearchDropdown"
                        tabindex="-1"
                    >
                        <div id="navMiniSearchDropdownListWrapper">
                            <ol
                                id="navMiniSearchDropdownList"
                                tabindex="-1"
                                @keydown.up.prevent="onUpList"
                                @keydown.down.prevent="onDownList"
                            >
                                {# Jump To Full Search #}
                                <li style="border-bottom: 2px solid var(--bs-border-color)">
                                    <a @keydown.tab="onTabList" tabindex="-1" class="link-strong-blue" :href="fullSearchUrl">
                                        <div class="hstack gap-2 p-2">

                                            {# Icon #}
                                            <div class="w-25">
                                                <span class="badge text-bg-primary w-100">
                                                    <i class="bi bi-search fs-5" aria-hidden="true"></i>
                                                </span>
                                            </div>

                                            {# Name #}
                                            <div class="vstack w-75">
                                                <span>Run as <strong>Full Technique Search</strong></span>
                                            </div>
                                        </div>
                                    </a>
                                </li>

                                {# Techniques #}
                                <template x-for="(tech, index) in techniques" :key="tech.techId">
                                    <li :class="(index % 2 === 0) ? 'bg-body-tertiary' : 'bg-body-primary'">
                                        <a @keydown.tab="onTabList" tabindex="-1" class="link-strong-blue" :href="resolveURL(tech.url)">
                                            <div class="hstack gap-2 p-2">

                                                {# ID #}
                                                <div class="w-25">
                                                    <span x-text="tech.techId" class="badge text-bg-primary w-100 fs-6"></span>
                                                </div>

                                                {# Name #}
                                                <template x-if="tech.isSub">
                                                    <div class="vstack w-75 text-break">
                                                        <span x-text="tech.baseName"></span>
                                                        <span><strong x-text="tech.subName"></strong></span>
                                                    </div>
                                                </template>
                                                <template x-if="!tech.isSub">
                                                    <div class="vstack w-75">
                                                        <span><strong x-text="tech.baseName"></strong></span>
                                                    </div>
                                                </template>
                                            </div>
                                        </a>
                                    </li>
                                </template>
                            </ol>
                        </div>
                    </div>
                </div>

                {# Buttons #}
                <div class="btn-group mb-2 mb-lg-0 ms-0 ms-lg-2" role="group">

                    {# Docs PDF Link #}
                    <a
                        href="/static/user-guide.html" target="_blank"
                        class="btn btn-light btn-border-dark underline-hover"
                    >Docs <i class="bi bi-info-circle" aria-hidden="true"></i>
                    </a>

                    {# Full Search Link #}
                    <a
                        x-data
                        :href="resolveURL(`/search/page?version=${encodeURIComponent(Alpine.store('global').versionPicker.cur_version)}&search=`)"
                        class="btn btn-light btn-border-dark underline-hover"
                        aria-label="Full Technique Search"
                    >Full Search <i class="bi bi-search" aria-hidden="true"></i>
                    </a>

                    {# Toggle Cart Offcanvas #}
                    <button
                        class="btn btn-light btn-border-dark"
                        type="button"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#shoppingCart"
                        aria-controls="shoppingCart"
                        aria-label="Open CTI Shopping Cart"
                    >Cart <i class="bi bi-cart" aria-hidden="true"></i>
                    </button>
                </div>
            </div>

        </div>
    </nav>

    {# Main #}
    <div tabindex="-1" id="main" class="container flex-grow-1">
        <main>
            {# Main Content + Scroll-to-Top #}
            <div>
                <div class="my-3">
                    {% block content %}{% endblock %}
                </div>

                {# Scroll-to-Top #}
                <button
                    {% if frontend_conf.classification_level|length and frontend_conf.classification_message|length %}
                    class="btn btn-light btn-border-dark mb-4"
                    {% else %}
                    class="btn btn-light btn-border-dark mb-0"
                    {% endif %}
                    id="btnScrollToTop"
                    x-data="scrollToTop"
                    x-cloak
                    x-show="visible"
                    @scroll.window="onScroll"
                    @click="onClick"
                    type="button"
                    title="Scroll to Top"
                    aria-label="Scroll to Top"
                >
                    <i class="bi bi-arrow-up bi-font-bold" aria-hidden="true"></i>
                </button>
            </div>

            {# Cart #}
            {{ cart() }}
        </main>
    </div>

    {# Footer #}
    <footer id="deciderFooter" class="text-center w-100 py-3">
        <div class="container">
            {{ user_additions.footer_top() }}

            Version: {{ g.decider_app_version }} &bull;
            <a
                href="https://github.com/cisagov/decider"
                target="_blank"
                rel="noreferrer noopener"
                class="link-light icon-link"
            >
                GitHub Repo <i class="bi bi-github" aria-hidden="true"></i>
            </a><br>
            Decider uses MITRE ATT&amp;CK&reg; &bull; <a
                href="https://attack.mitre.org/resources/legal-and-branding/terms-of-use/"
                target="_blank"
                rel="noreferrer noopener"
                class="link-light"
            >
                Terms of Use
            </a>

            {{ user_additions.footer_bottom() }}
        </div>
    </footer>

    {# Toaster #}
    <div class="toast-container position-fixed bottom-0 start-0">
        <div id="successToasts" aria-live="polite" aria-atomic="false"></div>
        <div id="failureToasts" aria-live="assertive" aria-atomic="false"></div>
    </div>

    {# Templates #}
    <template id="templateToast" x-ignore>
        <div
            x-data="toast(...see doToast...)"
            @hidden-bs-toast.dot="$root.remove()"
            :role="success ? 'status' : 'alert'"
            class="toast"
            :class="success ? 'text-bg-success' : 'text-bg-danger'"
        >
            <div class="toast-header">
                <i class="bi me-2" aria-hidden="true" :class="success ? 'bi-check' : 'bi-exclamation-triangle-fill'"></i>
                <strong class="me-auto" x-text="titleText"></strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" x-text="bodyText"></div>
        </div>
    </template>

    {# Welcome Modal #}
    <div
        x-data="{ open: false }"
        id="welcomeModal"
        class="modal fade"
        data-bs-backdrop="static"
        data-bs-focus="true"
        data-bs-keyboard="false"
        tabindex="-1"
        aria-labelledby="welcomeModalLabel"
        aria-hidden="true"
        @show-bs-modal.dot="open = true"
        @hide-bs-modal.dot="open = false; localStorage.setItem('has-seen-welcome', 'yes')"
        @hidden-bs-modal.dot="document.getElementById('skip-to-main-content').focus()"
        >
        <div class="modal-dialog" x-trap="open">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-2" id="welcomeModalLabel">Welcome to Decider!</h1>
                </div>
                <div class="modal-body fs-5">
                    <p>Decider is a web application that assists network defenders, analysts, and researchers in the process of mapping adversary behaviors to the MITRE ATT&amp;CK&reg; Framework.</p>
                    <span>It does this by offering:</span>
                    <ul>
                        <li><strong>A Question Tree</strong> &ndash; from Tactic to Technique to SubTechnique<b>,</b></li>
                        <li><strong>A Technique Search</strong> with boolean operators and filtering options<b>,</b></li>
                        <li><b>and</b> <strong>Suggestions</strong> of other Techniques that may have occurred</li>
                    </ul>
                    <p>Be sure to check out the <a href="/static/user-guide.html" target="_blank">Docs</a> if you need guidance.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {# Scripts #}
    <script>
        const csrfToken = {{ csrf_token() | tojson }};

        document.addEventListener('alpine:init', function() {
            Alpine.store('global', {
                appVersion       : {{ g.decider_app_version | tojson }},
                versionPicker    : {{ g.version_picker | default({}) | tojson }},
                userAuthenticated: {{ current_user.is_authenticated | tojson }},
                kioskModeOn      : {{ g.kiosk_mode | tojson }},
            });
        });
    </script>
    {% if frontend_conf.use_cdn_resources %}
    {{ user_additions.cdn_js() }}
    {% elif frontend_conf.use_minified_srcs %}
        <script src="/static/js/lib/jquery-3.7.0.slim/jquery-3.7.0.slim.min.js"></script>
        <script src="/static/js/lib/mark.js-9.0.0/jquery.mark.es6.min.js"></script>
        <script src="/static/js/lib/bootstrap-bundle-5.3.0/bootstrap.bundle.min.js"></script>
        <script src="/static/js/lib/docx-8.0.4/docx-8.0.4.js"></script>
        <script src="/static/js/lib/FileSaver/FileSaver.min.js"></script>
        <script src="/static/js/lib/lodash-4.17.15/lodash-4.17.15.min.js"></script>
        <script src="/static/js/lib/minisearch-6.1.0/minisearch-6.1.0.min.js"></script>
        <script defer src="/static/js/lib/alpinejs-3.12.2/alpinejs-focus-3.12.2.min.js"></script>
        <script defer src="/static/js/lib/alpinejs-3.12.2/alpinejs-3.12.2.min.js"></script>
        <script src="/static/js/decider.js?cache_bust=24jul03"></script>
    {% else %}
        <script src="/static/js/lib/jquery-3.7.0.slim/jquery-3.7.0.slim.js"></script>
        <script src="/static/js/lib/mark.js-9.0.0/jquery.mark.es6.js"></script>
        <script src="/static/js/lib/bootstrap-bundle-5.3.0/bootstrap.bundle.js"></script>
        <script src="/static/js/lib/docx-8.0.4/docx-8.0.4.js"></script>
        <script src="/static/js/lib/FileSaver/FileSaver.js"></script>
        <script src="/static/js/lib/lodash-4.17.15/lodash-4.17.15.js"></script>
        <script src="/static/js/lib/minisearch-6.1.0/minisearch-6.1.0.js"></script>
        <script defer src="/static/js/lib/alpinejs-3.12.2/alpinejs-focus-3.12.2.js"></script>
        <script defer src="/static/js/lib/alpinejs-3.12.2/alpinejs-3.12.2.js"></script>
        <script src="/static/js/decider.js?cache_bust=24jul03"></script>
    {% endif %}

    {{ user_additions.body_bottom() }}
</body>

</html>
